<template>
    <Row :gutter="24" type="flex" justify="center" align="middle" class="ivu-text-center numberBold">
        <Col v-bind="grid" class="ivu-mb">
            <div class="listBase" :class="{active: baseStatus === 1}">
<!--                <Avatar icon="md-person" v-color="'#40a9ff'" v-bg-color="'#e6f7ff'" />-->
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="baseData.total_user_number"/>
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    全院治疗人数
                </div>
            </div>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <div class="listBase" :class="{active: baseStatus === 2}">
<!--                <Avatar icon="md-podium" v-color="'#9254de'" v-bg-color="'#f9f0ff'" />-->
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="baseData.total_times_number" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308治疗人数
                </div>
<!--                <Tooltip placement="top" content="指标说明" class="dashboard-monitor-base-info-tip">-->
<!--                    <Icon type="ios-help-circle-outline" />-->
<!--                </Tooltip>-->
            </div>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <div class="listBase" :class="{active: baseStatus === 3}">
<!--                <Avatar icon="md-paper-plane" v-color="'#ffa940'" v-bg-color="'#fff7e6'" />-->
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="baseData.buy_number" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308购买个数
                </div>
<!--                <Tooltip placement="top" content="指标说明" class="dashboard-monitor-base-info-tip">-->
<!--                    <Icon type="ios-help-circle-outline" />-->
<!--                </Tooltip>-->
            </div>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <div class="listBase" :class="{active: baseStatus === 4}">
<!--                <Avatar icon="md-funnel" v-color="'#73d13d'" v-bg-color="'#f6ffed'" />-->
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="baseData.clinic_number" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308治疗个数
                </div>
            </div>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                grid: {
                    xl: 6,
                    lg: 12,
                    md: 12,
                    sm: 12,
                    xs: 12
                },
                baseStatus: 1
            }
        },
        props: ['baseData'],
        methods: {
            handleStatus (num) {
                this.baseStatus = num
                this.$emit('changeStatus', num)
            }
        }
    }
</script>
<style lang="less">
    .dashboard-monitor-base-info-number{
        font-size: 28px;
        font-weight: bold;
        margin: 8px 0 4px;
    }
    .dashboard-monitor-base-info-desc{
        color: #808695;
        font-size: 12px;
    }
    .dashboard-monitor-base-info-extra{
        height: 25px;
        margin-top: 10px;
        font-weight: bold;
        font-size: 14px;
        i{
            transform: scale(1.2);
            margin-right: 4px;
        }
        &-up{
            color: #19be6b;
        }
        &-down{
            color: #ed4014;
        }
    }
    .dashboard-monitor-base-info-tip{
        position: absolute;
        top: 10px;
        right: 10px;
        color: #808695;
    }
    .ivu-mb {
        .listBase {
            display: block;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all .2s ease-in-out;
            padding: 16px;
            &.active {
                background-color: #e8eaec;
            }
        }
    }
</style>
